.navbar
  .navbar-inner
    .left.sliding
      a(href="index.html").back.link
        i.icon.icon-back
        span Back
    .center.sliding List View
    .right
      a(href="#").open-panel.link.icon-only
        i.icon.icon-bars
.pages.navbar-through
  .page(data-page="list-view")
    .page-content
      .content-block
        p Framework7 allows you to be flexible with list views (table views). You can make them as navigation menus, you can use there icons, inputs, and any elements inside of the list, and even make them nested:
      .content-block-title Data list, with icons
      .list-block
        ul
          li
            .item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title Ivan Petrov
                .item-after CEO
          li
            .item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title John Doe
                .item-after 
                  span.badge 5
          li
            .item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title Jenna Smith
      .content-block-title Links
      .list-block
        ul
          li
            a(href="#").item-link.item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title Ivan Petrov
                .item-after CEO
          li
            a(href="#").item-link.item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title John Doe
                .item-after Cleaner
          li
            a(href="#").item-link.item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title Jenna Smith
      .content-block-title Links, no icons
      .list-block
        ul
          li
            a(href="#").item-link.item-content
              .item-inner 
                .item-title Ivan Petrov
          li
            a(href="#").item-link.item-content
              .item-inner 
                .item-title John Doe
          li
            .item-divider Divider Here
          li
            a(href="#").item-link.item-content
              .item-inner 
                .item-title Ivan Petrov
          li
            a(href="#").item-link.item-content
              .item-inner 
                .item-title Jenna Smith
      .content-block-title Grouped with sticky titles
      .list-block
        .list-group
          ul
            li.list-group-title A
            li
              .item-content
                .item-inner
                  .item-title Aaron 
            li
              .item-content
                .item-inner
                  .item-title Abbie
            li
              .item-content
                .item-inner
                  .item-title Adam
        .list-group
          ul
            li.list-group-title B
            li
              .item-content
                .item-inner
                  .item-title Bailey
            li
              .item-content
                .item-inner
                  .item-title Barclay
            li
              .item-content
                .item-inner
                  .item-title Bartolo
        .list-group
          ul
            li.list-group-title C
            li
              .item-content
                .item-inner
                  .item-title Caiden
            li
              .item-content
                .item-inner
                  .item-title Calvin
            li
              .item-content
                .item-inner
                  .item-title Candy
      .content-block-title Mixed and nested
      .list-block
        ul
          li
            a(href="#").item-link.item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title Ivan Petrov
                .item-after CEO
          li
            a(href="#").item-link.item-content
              .item-media
                i.icon.icon-f7
                i.icon.icon-f7
              .item-inner 
                .item-title Two icons here
          li
            .item-content
              .item-inner 
                .item-title No icons here
            ul
              li
                a(href="#").item-link.item-content
                  .item-media
                    i.icon.icon-f7
                  .item-inner 
                    .item-title Ivan Petrov
                    .item-after CEO
              li
                a(href="#").item-link.item-content
                  .item-media
                    i.icon.icon-f7
                    i.icon.icon-f7
                  .item-inner 
                    .item-title Two icons here
              li
                .item-content
                  .item-inner 
                    .item-title No icons here
              li
                a(href="#").item-link.item-content
                  .item-media
                    i.icon.icon-f7
                  .item-inner 
                    .item-title Ultra long text goes here, no, it is really really long
              li
                .item-content
                  .item-media
                    i.icon.icon-f7
                  .item-inner 
                    .item-title With switch
                    .item-after
                      label.label-switch
                        input(type="checkbox")
                        .checkbox
          li
            a(href="#").item-link.item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title Ultra long text goes here, no, it is really really long
          li
            .item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title With switch
                .item-after
                  label.label-switch
                    input(type="checkbox")
                    .checkbox

      .content-block-title Mixed, inset
      .list-block.inset
        ul
          li
            a(href="#").item-link.item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title Ivan Petrov
                .item-after CEO
          li
            a(href="#").item-link.item-content
              .item-media
                i.icon.icon-f7
                i.icon.icon-f7
              .item-inner 
                .item-title Two icons here
          li
            a(href="#").item-link.item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title Ultra long text goes here, no, it is really really long
          li
            .item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title With switch
                .item-after
                  label.label-switch
                    input(type="checkbox")
                    .checkbox
          
        .list-block-label
          p Here comes some useful information about list above
      .content-block-title Tablet inset
      .list-block.tablet-inset
        ul
          li
            a(href="#").item-link.item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title Ivan Petrov
                .item-after CEO
          li
            a(href="#").item-link.item-content
              .item-media
                i.icon.icon-f7
                i.icon.icon-f7
              .item-inner 
                .item-title Two icons here
          li
            a(href="#").item-link.item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title Ultra long text goes here, no, it is really really long
        .list-block-label
          p This list block will look like "inset" only on tablets (iPad)
          
          